<template>
  <div>
    <div class="header">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 权益列表 -->
        <el-tab-pane label="权益列表" name="first" style="padding: 0 20px">
          <NormalForm :formList="voucherFormList" :isShowCard="false" :operateForm="voucherForm"
                      @handleQuery="handleVoucherQuery" @handleReset="handleVoucherReset">
            <template slot="more-btn">
              <el-button v-hasPermi="['scrm:admin:scrmcoincertificatebatch:add']" icon="el-icon-plus" type="primary"
                         @click="goAddCoupon">新增权益
              </el-button>
            </template>
          </NormalForm>
          <div>
            <el-table :key="activeName" :data="voucherList" :loading="voucherLoading" height="470px"
                      style="width: 100%;">
              <el-table-column :width="140" align="center" label="批次号" prop="batchNo"></el-table-column>
              <el-table-column :min-width="140" align="center" label="权益名称" prop="name"
                               show-overflow-tooltip></el-table-column>
              <el-table-column :width="140" align="center" label="所属供应商" prop="providerName"
                               show-overflow-tooltip></el-table-column>
              <el-table-column :width="120" align="center" label="权益总数" prop="sumNum"></el-table-column>
              <el-table-column :width="120" align="center" label="已发放数量" prop="giveNum"></el-table-column>
              <el-table-column :width="120" align="center" label="已核销数量" prop="useNum"></el-table-column>
              <el-table-column align="center" label="是否限制领取次数" prop="isLimitValue"
                               width="150"></el-table-column>
              <!--              <el-table-column align="center" label="有效时长（天）" prop="validTime" width="120"></el-table-column>-->
              <el-table-column :width="140" align="center" label="创建人" prop="createBy"></el-table-column>
              <el-table-column :min-width="140" align="center" label="创建时间" prop="createTime"></el-table-column>
              <el-table-column align="center" label="状态" prop="isAble" width="120">
                <template slot-scope="{ row }">
                  <el-switch v-model="row.isAble" v-hasPermi="['scrm:admin:scrmcoincertificatebatch:edit']"
                             :active-text="row.isAble === '1' ? '不可用' : '可用'" :active-value="'0'"
                             :inactive-value="'1'" style="font-size: 12px" @change="changeState(row)">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column align="center" fixed="right" label="操作" width="220">
                <template slot-scope="scope">
                  <el-button type="text" @click="shareFile(scope.row)">分享</el-button>
                  <!--                  <el-button v-hasPermi="['scrm:admin:scrmcoincertificatebatch:give']" :disabled="scope.row.isAble === '1'" type="text" @click="sendCoupon(scope.row)">发放</el-button>-->
                  <el-button type="text" @click="goCouponInfo(scope.row)">查看详情</el-button>
                  <el-button type="text" @click="configStaff(scope.row)">执行配置</el-button>
                </template>
              </el-table-column>
            </el-table>
            <NormalPagination :currentPage="voucherForm.pageNum" :pageSize="voucherForm.pageSize" :total="voucherTotal"
                              @handleCurrentChange="handleCurrentChange"
                              @handleSizeChange="handleSizeChange"></NormalPagination>
          </div>
        </el-tab-pane>
        <!-- 核销统计 -->
        <el-tab-pane label="核销统计" name="second" style="padding: 0 20px">
          <NormalForm :formList="writeOffFormList" :isShowCard="false" :operateForm="writeOffForm"
                      @handleQuery="handleWriteOffQuery" @handleReset="handleWriteOffReset"></NormalForm>
          <div>
            <el-table :key="activeName" :data="writeOffList" :loading="writeOffLoading" height="470px"
                      style="width: 100%;">
              <el-table-column align="center" label="批次号" prop="batchNo"></el-table-column>
              <el-table-column align="center" label="权益名称" prop="name"></el-table-column>
              <el-table-column align="center" label="已领取/库存" prop="getAndSum"></el-table-column>
              <el-table-column align="center" label="发送人数" prop="giveNum"></el-table-column>
              <el-table-column align="center" label="领取人数" prop="getNum"></el-table-column>
              <el-table-column align="center" label="领取率" prop="getRate"></el-table-column>
              <el-table-column align="center" label="核销人数" prop="useNum"></el-table-column>
              <el-table-column align="center" label="核销率" prop="useRate"></el-table-column>
            </el-table>
            <NormalPagination :currentPage="writeOffForm.pageNum" :pageSize="writeOffForm.pageSize"
                              :total="writeOffTotal" @handleCurrentChange="handleCurrentChange"
                              @handleSizeChange="handleSizeChange"></NormalPagination>
          </div>
        </el-tab-pane>
        <!-- 权益数据分析 -->
        <el-tab-pane label="权益数据分析" name="third" style="padding: 0 20px">
          <NormalForm :enumOpt="enumOpt" :formList="analysisFormList" :isShowCard="false" :operateForm="analysisForm"
                      @handleQuery="handleAnalysisQuery" @handleReset="handleAnalysisReset"></NormalForm>
          <div>
            <el-table ref="analysisTable" :data="analysisList" :loading="analysisLoading"
                      :row-key="(row) => { return row.id }"
                      height="470px" style="width: 100%;" @select="handleSelectionChange"
                      @select-all="handleSelectedCancel">
              <el-table-column align="center" type="selection" width="30"></el-table-column>
              <el-table-column align="center" label="排行" type="index" width="60"></el-table-column>
              <el-table-column :width="140" align="center" label="批次号" prop="batchNo"></el-table-column>
              <el-table-column :min-width="140" align="center" label="权益名称" prop="name"
                               show-overflow-tooltip></el-table-column>
              <el-table-column :min-width="160" align="center" label="创建时间" prop="createTime">
                <template slot="header">
                  创建时间
                  <i class="el-icon-sort" style="cursor: pointer" @click="sortList('createTime')"></i>
                </template>
              </el-table-column>
              <el-table-column :min-width="140" align="center" label="所属供应商" prop="providerName"></el-table-column>
              <el-table-column :width="140" align="center" label="权益总数" prop="sumNum"></el-table-column>
              <el-table-column :width="140" align="center" label="已发放数量" prop="giveNum"></el-table-column>
              <el-table-column :width="140" align="center" label="领取数量" prop="getNum"></el-table-column>
              <el-table-column :width="140" align="center" label="领取人数" prop="getMan"></el-table-column>
              <el-table-column :width="140" align="center" label="领取率" prop="getRate">
                <template slot="header">
                  领取率
                  <i class="el-icon-sort" style="cursor: pointer" @click="sortList('getRate')"></i>
                </template>
                <template slot-scope="scope">
                  <div>{{ scope.row.getRate }}%</div>
                </template>
              </el-table-column>
              <el-table-column :width="140" align="center" label="核销数量" prop="useMan"></el-table-column>
              <el-table-column :width="140" align="center" label="核销人数" prop="useMan"></el-table-column>
              <el-table-column :width="140" align="center" label="核销率" prop="useRate">
                <template slot="header">
                  核销率
                  <i class="el-icon-sort" style="cursor: pointer" @click="sortList('useRate')"></i>
                </template>
                <template slot-scope="scope">
                  <div>{{ scope.row.useRate }}%</div>
                </template>
              </el-table-column>
            </el-table>
            <NormalPagination :currentPage="analysisForm.pageNum" :pageSize="analysisForm.pageSize"
                              :total="analysisTotal" @handleCurrentChange="handleCurrentChange"
                              @handleSizeChange="handleSizeChange"></NormalPagination>
          </div>
          <!--          <div class="analysis-echart">-->
          <!--            <div class="analysis-echart-title">-->
          <!--              <div class="title-icon"></div>-->
          <!--              <div class="title-text">领取客群分析</div>-->
          <!--            </div>-->
          <!--            <div class="analysis-echart-content">-->
          <!--              <div id="echarts-a"></div>-->
          <!--              <div id="echarts-b"></div>-->
          <!--            </div>-->
          <!--          </div>-->
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 兑换卡发放 -->
    <el-dialog :visible="couponVisible" title="兑换卡发放" width="520px" @close="closeDialog">
      <el-form ref="couponForm" :model="couponForm" :rules="couponRulers">
        <el-form-item label="兑换卡批次号" label-width="110px" prop="batchNo">
          <el-input v-model="couponForm.batchNo" clearable></el-input>
        </el-form-item>
        <el-form-item label="客户手机号" label-width="110px" prop="mobile">
          <el-input v-model="couponForm.mobile" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="giveCoupon">确认发放</el-button>
      </div>
    </el-dialog>
    <!-- 执行配置 -->
    <el-dialog :visible="staffVisible" title="执行配置" width="520px" @close="closeStaffDialog">
      <el-form ref="staffForm" :model="staffForm" :rules="staffRules">
        <el-form-item label="执行员工组" label-width="110px" prop="deptIdList">
          <el-select v-model="staffForm.deptIdList" multiple placeholder="请选择">
            <el-option v-for="item in groupOptions" :key="item.groupIdValue" :label="item.name"
                       :value="item.groupIdValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模版配置" label-width="110px" prop="pageType">
          <el-select v-model="staffForm.pageType" filterable placeholder="请选择">
            <el-option v-for="item in pageTypeOptions" :key="item.dictValue" :label="item.dictLabel"
                       :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="closeStaffDialog">取 消</el-button>
        <el-button :loading="confirmConfigLoading" type="primary" @click="confirmConfig">确 认</el-button>
      </div>
    </el-dialog>
    <!-- 分享 -->
    <el-dialog :visible="shareVisible" title="分享" width="520px" @close="closeShareDialog">
      <el-form ref="couponForm" :model="shareForm">
        <el-form-item label="分享链接" label-width="110px" prop="shareUrl" required>
          <el-input v-model="shareForm.shareUrl">
            <template slot="append"><span style="color: #082aff" @click="copyUrl">复制</span></template>
          </el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  editCouponState,
  getAnalysisList,
  getBatchNoList,
  getCouponList,
  getCouponNameList,
  getProviderList,
  getShareLink,
  giveCoupon,
  userCouponList
} from '../../../api/communityOperating/coupon.js'
import {getGroup} from '@/api/system/staff.js'
import * as echarts from 'echarts'

export default {
  name: 'PersonalSop',
  data() {
    var checkMoblie = (rule, value, callback) => {
      var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!reg.test(this.couponForm.mobile)) {
        callback(new Error('手机号码必须以13,14,15,16,17,18,19开头，请核实'))
      } else {
        callback()
      }
    }
    return {
      activeName: 'first',
      // 权益列表
      voucherForm: {
        name: '',
        batchNo: '',
        createBy: '',
        providerName: '',
        pageNum: 1,
        pageSize: 20,
      },
      voucherFormList: [
        {
          label: '权益名称',
          value: '',
          prop: 'name',
          type: 'INPUT',
          emunName: '',
        },
        {
          label: '权益批次号',
          value: '',
          prop: 'batchNo',
          type: 'INPUT',
          emunName: '',
        },
        {
          label: '创建人',
          value: '',
          prop: 'createBy',
          type: 'INPUT',
          emunName: '',
        },
        {
          label: '供应商',
          value: '',
          prop: 'providerName',
          type: 'INPUT',
          emunName: '',
        },
      ],
      voucherLoading: false,
      voucherList: [],
      voucherTotal: 0,
      // 发放权益
      couponVisible: false,
      couponForm: {
        batchNo: '',
        mobile: '',
      },
      // 执行配置
      currentItem: {}, //当前选择项
      couponRulers: {
        batchNo: [
          {required: true, message: '请输入兑换卡批次号', trigger: 'blur'},
        ],
        mobile: [
          {required: true, message: '请输入客户手机号', trigger: 'blur'},
          {
            min: 11,
            max: 11,
            message: '手机号码位数需为11位',
            trigger: 'blur',
          },
          {validator: checkMoblie, trigger: 'blur'},
        ],
      },
      staffVisible: false,
      staffForm: {
        deptIdList: [],
        pageType: '',
      },
      staffRules: {
        deptIdList: [
          {required: true, message: '请选择执行员工组', trigger: 'change'},
        ],
        pageType: [
          {required: true, message: '请选择模版配置', trigger: 'change'},
        ]
      },
      pageTypeOptions: [], //模版配置
      groupOptions: [], //员工组
      // 核销统计
      writeOffForm: {
        batchNo: null,
        name: null,
        pageNum: 1,
        pageSize: 20,
      },
      writeOffFormList: [
        {
          label: '批次号',
          value: '',
          prop: 'batchNo',
          type: 'INPUT',
          emunName: '',
        },
        {
          label: '权益名称',
          value: '',
          prop: 'name',
          type: 'INPUT',
          emunName: '',
        },
      ],
      writeOffLoading: false,
      writeOffList: [],
      writeOffTotal: 0,
      // 权益数据分析
      analysisForm: {
        name: null,
        batchNo: null,
        createCodeList: '',
        providerId: null,
        sortFlag: '1',
        pageNum: 1,
        pageSize: 20,
      },
      analysisFormList: [
        {
          label: '权益名称',
          value: '',
          prop: 'name',
          type: 'SELECT',
          emunName: 'nameList',
        },
        {
          label: '权益批次号',
          value: '',
          prop: 'batchNo',
          type: 'SELECT',
          emunName: 'batchNoList',
        },
        {
          label: '创建人',
          value: '',
          prop: 'createCodeList',
          type: 'STAFF',
          emunName: '',
        },
        {
          label: '供应商',
          value: '',
          prop: 'providerId',
          type: 'SELECT',
          emunName: 'providerList',
        },
        // {
        //   label: '',
        //   value: '',
        //   prop: 'sortFlag',
        //   type: 'RADIO',
        //   emunName: 'rankList',
        // },
      ],
      enumOpt: {
        nameList: [],
        batchNoList: [],
        providerList: [],
        // rankList: [
        //   { label: '领取排行', value: '1' },
        //   { label: '核销排行', value: '2' },
        // ]
      },
      analysisLoading: false,
      analysisList: [],
      analysisTotal: 0,
      shareVisible: false,
      shareForm: {
        shareUrl: '',
      },
      confirmConfigLoading: false,
    }
  },
  mounted() {
    this.getEnumList()
    this.getGroup()
    this.getPageTypeOptions()
    this.handleVoucherQuery()
  },
  methods: {
    // 下拉枚举
    getEnumList() {
      getCouponNameList().then(res => {
        if (res.code == 200) {
          res.data.forEach(item => {
            this.enumOpt.nameList.push({dictLabel: item, dictValue: item})
          })
        }
      });
      getProviderList().then(res => {
        if (res.code == 200) {
          res.data.forEach(item => {
            this.enumOpt.providerList.push({dictLabel: item.providerName, dictValue: item.providerId})
          })
        }
      });
      getBatchNoList().then(res => {
        if (res.code == 200) {
          res.data.forEach(item => {
            this.enumOpt.batchNoList.push({dictLabel: item, dictValue: item})
          })
        }
      });
    },
    handleClick() {
      if (this.activeName === 'first') {
        this.handleVoucherReset()
      } else if (this.activeName === 'second') {
        this.handleWriteOffReset()
      } else if (this.activeName === 'third') {
        this.handleAnalysisReset()
        // this.echartsCircleA()
        // this.echartsCircleB()
      }
    },
    /** 权益列表 **/
    handleVoucherQuery() {
      this.voucherForm.pageNum = 1;
      this.getCouponListFn()
    },
    getCouponListFn() {
      this.voucherLoading = true;
      getCouponList(this.voucherForm).then(res => {
        if (res.code === 200) {
          this.voucherList = res.rows || []
          this.voucherTotal = res.total || 0
        }
        this.voucherLoading = false;
      }).catch(() => {
        this.voucherLoading = false;
      })
    },
    handleVoucherReset() {
      this.voucherForm = {
        name: '',
        batchNo: '',
        createBy: '',
        providerName: '',
        pageNum: 1,
        pageSize: 20,
      }
      this.handleVoucherQuery()
    },
    // 统一翻页方式
    handleSizeChange(val) {
      if (this.activeName === 'first') {
        this.voucherForm.pageNum = 1
        this.voucherForm.pageSize = val
        this.getCouponListFn()
      } else if (this.activeName === 'second') {
        this.writeOffForm.pageNum = 1
        this.writeOffForm.pageSize = val
        this.userCouponListFn()
      } else {
        this.analysisForm.pageNum = 1
        this.analysisForm.pageSize = val
        this.getAnalysisListFn()
      }
    },
    handleCurrentChange(val) {
      if (this.activeName === 'first') {
        this.voucherForm.pageNum = val
        this.getCouponListFn()
      } else if (this.activeName === 'second') {
        this.writeOffForm.pageNum = val
        this.userCouponListFn()
      } else {
        this.analysisForm.pageNum = val
        this.getAnalysisListFn()
      }
    },
    // 发放兑换卡
    sendCoupon(row) {
      this.couponForm.batchNo = row.batchNo
      this.couponVisible = true
    },
    closeDialog() {
      this.couponVisible = false
      this.couponForm = {batchNo: '', mobile: ''}
    },
    closeShareDialog() {
      this.shareVisible = false
      this.shareForm = {shareUrl: ''}
    },
    // 发放券
    giveCoupon() {
      this.$refs.couponForm.validate(async (isok) => {
        if (isok) {
          const res = await giveCoupon(this.couponForm)
          if (res.code === 200) {
            this.$message.success(res.data)
            this.couponVisible = false
            this.couponForm = {
              batchNo: '',
              mobile: '',
            }
            this.handleVoucherQuery()
          }
        }
      })
    },
    // 执行配置
    configStaff(row) {
      this.currentItem = row
      this.staffForm.deptIdList = row.deptIds.split(',')
      this.staffForm.pageType = row.pageType
      this.staffVisible = true
    },
    // 获取员工组
    async getGroup() {
      const {rows} = await getGroup()
      this.groupOptions = rows || [];
    },
    getPageTypeOptions(){
      this.pageTypeOptions = []
      this.getDicts("coupon_model_page_type").then((res) => {
        if (res.code === 200) {
          this.pageTypeOptions = res.data
        }
      });
    },
    // 关闭员工组弹窗
    closeStaffDialog() {
      this.staffVisible = false
    },
    // 确认配置
    confirmConfig() {
      this.$refs.staffForm.validate(async (isok) => {
        if (isok) {
          this.confirmConfigLoading = true
          const res = await editCouponState({
            batchNo: this.currentItem.batchNo,
            isAble: this.currentItem.isAble,
            deptIdList: this.staffForm.deptIdList,
            pageType: this.staffForm.pageType,
          })
          if (res.code === 200) {
            this.$message.success(res.data)
            this.staffVisible = false
            this.handleVoucherQuery()
          }
          this.confirmConfigLoading = false
        }
      })
    },
    // 去往新增
    goAddCoupon() {
      this.$router.push({path: 'AddCoupon'})
    },
    // 权益详情
    goCouponInfo(row) {
      this.$router.push({
        path: 'CouponInfo',
        query: {
          batchNo: row.batchNo,
        },
      })
    },
    // 分享
    shareFile(row) {
      this.shareVisible = true
      const url = window.globalConfig.SHARE_URL_JUMPCOUPONTEMP + row.batchNo
      let shareUrl = ''
      getShareLink({url: url}).then(res => {
        shareUrl = res.data || ''
        if (!shareUrl) return
        this.shareForm = {
          shareUrl: window.globalConfig.SHARE_SHORT_LINK + shareUrl
        }
      })
    },
    copyUrl() {
      if (!this.shareForm.shareUrl) return this.$message.error('复制失败')
      let copyInput = document.createElement('input') //创建input元素
      document.body.appendChild(copyInput) //向页面底部追加输入框
      copyInput.setAttribute('value', this.shareForm.shareUrl) //添加属性，将url赋值给input元素的value属性
      copyInput.select() //选择input元素
      document.execCommand('Copy') //执行复制命令
      this.$message.success('链接已复制！') //弹出提示信息，不同组件可能存在写法不同
      //复制之后再删除元素，否则无法成功赋值
      copyInput.remove() //删除动态创建的节点
    },
    /** 核销统计 **/
    handleWriteOffQuery() {
      this.writeOffForm.pageNum = 1;
      this.userCouponListFn()
    },
    userCouponListFn() {
      this.writeOffLoading = true;
      userCouponList(this.writeOffForm).then(res => {
        if (res.code === 200) {
          this.writeOffList = res.rows || []
          this.writeOffTotal = res.total || 0
        }
        this.writeOffLoading = false;
      })
    },
    handleWriteOffReset() {
      this.writeOffForm = {
        batchNo: null,
        name: null,
        pageNum: 1,
        pageSize: 20,
      }
      this.handleWriteOffQuery()
    },
    // 修改状态
    async changeState(row) {
      console.log(row)
      const res = await editCouponState({
        batchNo: row.batchNo,
        isAble: row.isAble,
        deptIdList: row.deptIdList,
      })

      if (res.code === 200) {
        this.$message.success(res.data)
        this.handleVoucherQuery()
      }
    },
    /*
     *@Description: 私域二期-客户运营中权益管理增加权益数据分析功能
     *@MethodAuthor:  shenmengfei_sinosoft
     *@param {DOM}
     *@param {String}
     *@returns {String}
     *@Date: 2023-05-23 17:20:54
     */
    handleAnalysisQuery() {
      this.analysisForm.pageNum = 1;
      sessionStorage.setItem('timeSortFlag', '0')
      sessionStorage.setItem('useSortFlag', '0')
      sessionStorage.setItem('getSortFlag', '0')
      this.getAnalysisListFn()
    },
    getAnalysisListFn() {
      this.analysisLoading = true;
      const params = {
        batchNo: this.analysisForm.batchNo,
        name: this.analysisForm.name,
        providerId: this.analysisForm.providerId,
        createCodeList: this.analysisForm.createCodeList + '',
        sortFlag: this.analysisForm.sortFlag,
        pageNum: this.analysisForm.pageNum,
        pageSize: this.analysisForm.pageSize,
        timeSortFlag: sessionStorage.getItem('timeSortFlag') || '0',
        getSortFlag: sessionStorage.getItem('getSortFlag') || '0',
        useSortFlag: sessionStorage.getItem('useSortFlag') || '0',
      };
      getAnalysisList(params).then(res => {
        if (res.code == 200) {
          this.analysisList = res.rows || [];
          this.analysisTotal = res.total || 0;
        }
        this.analysisLoading = false;
      })
    },
    handleAnalysisReset() {
      this.analysisForm = {
        name: null,
        batchNo: null,
        createCodeList: '',
        providerId: null,
        sortFlag: '1',
        pageNum: 1,
        pageSize: 20,
      };
      this.handleAnalysisQuery()
    },
    handleSelectionChange(val, row) {
      console.log('当前选择：', val, row)
      let data = null;
      if (row) {
        data = row;
        this.$refs.analysisTable.clearSelection();
        this.currentSid = data.id;
        this.$refs.analysisTable.toggleRowSelection(data, true);
      } else {
        data = this.analysisList[0];
        this.currentSid = data.id;
        this.$refs.analysisTable.toggleRowSelection(data, true);
      }
      // this.getEchartsData();
    },
    handleSelectedCancel() {
      this.$refs.analysisTable.clearSelection();
      this.$refs.analysisTable.toggleRowSelection(this.analysisTable[0], true);
    },
    // 图表1
    echartsCircleA() {
      let chartDom = document.getElementById('echarts-a')
      console.log(chartDom)
      let myChart = echarts.init(chartDom)
      let option = {
        title: {
          text: '总体领取客群占比数据',
          bottom: '5%',
          left: 'center',
          textStyle: {
            color: 'black',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'Microsoft YaHei',
            fontSize: 14, //字体大小
            lineHeight: 14, //字体行高
          },
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 120, name: '活跃客群'},
              {value: 5, name: '高消费客群'},
              {value: 480, name: '女性客群'},
              {value: 20, name: '男性客群'},
              {value: 100, name: '80年代客群'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      option && myChart.setOption(option)
    },
    // 图表2
    echartsCircleB() {
      let chartDom = document.getElementById('echarts-b')
      let myChart = echarts.init(chartDom)
      let option = {
        title: {
          text: '[批次号-兑换卡名称]领取客群占比数据',
          bottom: '5%',
          left: 'center',
          textStyle: {
            color: 'black',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'Microsoft YaHei',
            fontSize: 14, //字体大小
            lineHeight: 14, //字体行高
          },
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 220, name: '活跃客群'},
              {value: 190, name: '高消费客群'},
              {value: 280, name: '女性客群'},
              {value: 120, name: '男性客群'},
              {value: 140, name: '80年代客群'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      option && myChart.setOption(option)
    },
    sortList(column) {
      console.log(column, 'column')
      if (column == 'createTime') {
        if (sessionStorage.getItem('timeSortFlag') == '2') {
          sessionStorage.setItem('timeSortFlag', '1')
        } else {
          sessionStorage.setItem('timeSortFlag', '2')
        }
        sessionStorage.setItem('getSortFlag', '0')
        sessionStorage.setItem('useSortFlag', '0')
      } else if (column == 'useRate') {
        if (sessionStorage.getItem('useSortFlag') == '2') {
          sessionStorage.setItem('useSortFlag', '1')
        } else {
          sessionStorage.setItem('useSortFlag', '2')
        }
        sessionStorage.setItem('timeSortFlag', '0')
        sessionStorage.setItem('getSortFlag', '0')
      } else if (column == 'getRate') {
        if (sessionStorage.getItem('getSortFlag') == '2') {
          sessionStorage.setItem('getSortFlag', '1')
        } else {
          sessionStorage.setItem('getSortFlag', '2')
        }
        sessionStorage.setItem('timeSortFlag', '0')
        sessionStorage.setItem('useSortFlag', '0')
      }
      window.setTimeout(() => {
        this.getAnalysisListFn()
      }, 10)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../../styles/base.scss';

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: none !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9 !important;
}

.header {
  padding: 6px 0px 20px;
  background: #ffffff;
  border-radius: 8px;
  width: 100%;
}

.analysis-echart {
  .analysis-echart-title {
    display: flex;
    align-items: center;
    margin: 20px 0;

    .title-icon {
      width: 4px;
      height: 24px;
      background: rgba(15, 64, 245, 1);
      margin-right: 10px;
    }

    .title-text {
      color: rgba(16, 16, 16, 1);
      font-size: 16px;
      font-family: SourceHanSansSC-regular;
    }
  }

  .analysis-echart-content {
    display: flex;

    #echarts-a,
    #echarts-b {
      width: 480px;
      height: 420px;
    }

    #echarts-b {
      margin-left: 40px;
    }
  }
}
</style>
